<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<%--当设置为false时，表示不忽略EL表达式，容器会解析执行EL表达式--%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link href="css/common.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="wrap">
    <!-- main begin-->
    <div class="zclf login logns">
        <form action="/auction/do/register?" method="post" id="registerForm">
            <div class="zclf login logns">
                <h1 class="blue">用户注册</h1>
                <dl>
                    <dd>
                        <!-- 隐藏字段保存用户类型 -->
                        <input type="hidden" name="userIsAdmin" value="${param.userIsAdmin}">
                    </dd>
                    <dd>
                        <label><small>*</small>用户名</label>
                        <input type="text" name="username" class="inputh lf" required
                               minlength="6" placeholder="不低于6个字符"/>
                        <div class="lf red laba">用户名要求不低于6个字符</div>
                    </dd>
                    <dd>
                        <label><small>*</small>密码</label>
                        <input type="password" name="password" class="inputh lf" required
                               minlength="6" placeholder="不低于6个字符"/>
                        <div class="lf red laba">密码要求不低于6个字符</div>
                    </dd>
                    <dd>
                        <label><small>*</small>身份证号</label>
                        <input type="text" name="idCard" class="inputh lf" required
                               pattern="\d{17}[\dXx]" placeholder="18位身份证号"/>
                        <div class="lf red laba">身份证号必填</div>
                    </dd>
                    <dd>
                        <label><small>*</small>电话</label>
                        <input type="tel" name="phone" class="inputh lf" required
                               pattern="1[3-9]\d{9}" placeholder="11位手机号"/>
                        <div class="lf red laba">电话号码必填</div>
                    </dd>
                    <dd>
                        <label><small>*</small>住址</label>
                        <input type="text" name="address" class="inputh lf" required/>
                    </dd>
                    <dd>
                        <label><small>*</small>邮政编码</label>
                        <input type="text" name="postcode" class="inputh lf" required
                               pattern="\d{6}" placeholder="6位邮政编码"/>
                    </dd>
                    <dd class="hegas">
                        <label><small>*</small>验证码</label>
                        <input type="text" name="captcha" class="inputh inputs lf" required/>
                        <span class="wordp lf"><img src="captcha.jpg" width="96" height="27" alt="验证码"/></span>
                        <span class="blues lf"><a href="javascript:refreshCaptcha()" title="">看不清</a></span>
                    </dd>
                    <dd class="hegas">
                        <label>&nbsp;</label>
                        <input type="checkbox" id="agreeTerms" name="agreeTerms" required/>
                        <label for="agreeTerms" class="labels">我同意<span class="blues">《服务条款》</span></label>
                    </dd>
                    <dd class="hegas">
                        <label>&nbsp;</label>
                        <button type="submit" class="spbg buttombg buttombgs f14 lf">立即注册</button>
                    </dd>
                </dl>
            </div>
        </form>
    </div>
</div>
<script>
    // 表单提交前验证
    document.getElementById('registerForm').onsubmit = function (e) {
        // 1. 检查是否同意条款
        if (!document.getElementById('agreeTerms').checked) {
            showError('agreeTerms', '请同意服务条款');
            e.preventDefault();
            return false;
        }
        // 2. 验证用户名
        const username = document.querySelector('input[name="username"]').value.trim();
        if (username.length < 6) {
            showError('username', '用户名不能少于6个字符');
            e.preventDefault();
            return false;
        }

        // 3. 验证密码
        const password = document.querySelector('input[name="password"]').value;
        if (password.length < 6) {
            showError('password', '密码不能少于6个字符');
            e.preventDefault();
            return false;
        }

        // 4. 验证身份证号
        const idCard = document.querySelector('input[name="idCard"]').value.trim();
        if (!/^\d{17}[\dXx]$/.test(idCard)) {
            showError('idCard', '请输入有效的18位身份证号');
            e.preventDefault();
            return false;
        }

        // 5. 验证手机号
        const phone = document.querySelector('input[name="phone"]').value.trim();
        if (!/^1[3-9]\d{9}$/.test(phone)) {
            showError('phone', '请输入有效的手机号');
            e.preventDefault();
            return false;
        }

        // 6. 验证地址
        const address = document.querySelector('input[name="address"]').value.trim();
        if (address === '') {
            showError('address', '请输入住址');
            e.preventDefault();
            return false;
        }

        // 7. 验证邮政编码
        const postcode = document.querySelector('input[name="postcode"]').value.trim();
        if (!/^\d{6}$/.test(postcode)) {
            showError('postcode', '请输入6位邮政编码');
            e.preventDefault();
            return false;
        }

        // 所有验证通过
        return true;
    };

</script>
</body>
</html>
